<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <!--        <el-button type="primary" size="mini" slot="right">设置收款二维码</el-button>-->
            </PlatformCrumb>
            <div class="finance-info">
                <div class="finance-item">
                    <div class="title">今日新增支付</div>
                    <div class="total red">￥{{money}}</div>
                    <div class="all-total">累计支付 ￥{{moneySum}}</div>
                    <div class="icon user-icon"></div>
                </div>
            </div>
            <div class="finance-crumb display-flex-row align-items-center">
                <div class="crumb-item">
                    <span>用户列表（{{total}}）</span>
                    <el-select v-model="type" size="mini" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="crumb-item display-flex-row align-items-center">
                    <span>快速查询</span>
                    <el-input v-model="key" placeholder="请输入手机号或姓名" size="mini"></el-input>
                </div>
                <div class="button-wrap flex1 display-flex-row align-items-center justify-content-between">
                    <el-button type="primary" size="mini" @click="ordersgetList">查询</el-button>
                    <el-button type="primary" size="mini" @click="goreconciliation">对账</el-button>
                </div>
            </div>
            <div class="table">
                <el-table
                        :header-cell-style="{background:'#F7F7F7',color:'#333333'}"
                        ref="multipleTable"
                        :data="list"
                        stripe
                        tooltip-effect="dark"
                        style="width: 100%"
                >
                    <el-table-column type="index" label="序号" width="120">
                    </el-table-column>
                    <el-table-column prop="id" label="用户ID" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="name" label="用户姓名" width="120"></el-table-column>
                    <el-table-column prop="userType" label="用户角色" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="mechanismName" label="所属机构" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="money" label="流水金额" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="type" label="流水类型" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.type|filterstype(options)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="160" prop="createTime" label="产生日期" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime|filterdata}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background :page-size="pageSize" layout="total, prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {ordersgetList, getSum} from '../../api/api/platform.js';
    import {baseImgPath, basefile} from '@/config/env.js';
    import {formatDate} from '@/utils/utils'
    export default {
        components: {
            PlatformCrumb
        },
        created() {
            this.ordersgetList()
            this.getSum()
        },
        data() {
            return {
                options: [
                    {
                        value: 1,
                        label: "赛事"
                    },
                    {
                        value: 2,
                        label: "涨球"
                    },
                    {
                        value: 3,
                        label: "培训"
                    }
                ],
                value: "",
                tableData: [],
                multipleSelection: [],
                list: [],
                total: 0,
                key: "",
                matchsId: 0,
                pageNum: 1,
                pageSize: 10,
                type: 1,
                money: 0,
                moneySum: 0,
            };
        },
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            goreconciliation() {
                var that = this;
                that.$router.push({
                    path: '/platform/reconciliation',
                })
            },
            ordersgetList() {
                ordersgetList({
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                    "type": this.type,
                    "key": this.key,
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.total
                });
            },
            getSum() {
                var that = this;
                getSum().then(res => {
                    console.log(res.data.money);
                    that.money = res.data.money
                    that.moneySum = res.data.moneySum
                });
            }
        },
        filters: {
            filtersImg: function (img) {
                return baseImgPath + img
            },
            filterstype: function (e, data) {
                console.log(e,data);
                for (var i = 0; i < data.length; i++) {
                    if (e == data[i].value) {
                        return data[i].label
                    }
                }
            },
            filterdata: function (e) {
                console.log(e);
                var date = e;
                var timestamp = new Date(date).getTime();
                return formatDate(timestamp, 'Y-M-D H:I:S')
            }
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    .finance-crumb {
        height: 58px;
        padding: 0 20px;

        .crumb-item {
            margin-right: 20px;

            > span {
                display: inline-block;
                min-width: 90px;
            }
        }
    }

    .finance-info {
        padding: 40px;
        background-color: #fff;

        .finance-item {
            display: inline-block;
            width: 365px;
            height: 161px;
            background-color: #fff;
            margin-right: 40px;
            vertical-align: top;
            box-shadow: 0px 3px 18px 0px rgba(178, 175, 175, 0.22);
            padding: 18px 17px;
            border-bottom: 25px solid #116ce4;
            position: relative;

            .title {
                font-size: 16px;
                color: #333333;
            }

            .total {
                font-size: 24px;
                color: #333333;
                margin-top: 15px;

                &.red {
                    color: #c60818;
                }
            }

            .all-total {
                font-size: 16px;
                color: #666666;
                margin-top: 17px;
            }

            .icon {
                position: absolute;
                width: 44px;
                height: 44px;
                border-radius: 100%;
                top: 26px;
                right: 26px;

                &.user-icon {
                    background: #e3efff url('/images/user-icon.png') center center no-repeat;
                }

                &.user-right-icon {
                    background: #e3efff url('/images/user-right.png') center center no-repeat;
                }
            }
        }
    }
</style>
